<template>
	<view class="slide">
		<swiper :style="'height:'+heightNumber+'px'"  :interval="interval" :circular="circular"
			:current="current" previous-margin="30px" next-margin="30px" @change="handleChange">
			<swiper-item class="swiper-item-card" :class="{'swiper-item-card-margin':swiperCurrent!=index}"
				v-for="(item, index) in list" :key="index" @click="swiperItemClick(index)">
				<view class="swiper-container" :class="[type==='book'?'':'is-seal']">
					<image src="@/assets/images/list-border.png" class="card-bg" v-if="type === 'book'"></image>
					<image src="@/assets/images/seal-border.png" class="card-bg" v-else></image>
					<image :src="item.src" lazy-load mode="aspectFit" :style="'border-radius:'+borderRadius+'px;'" 
						:class="{'defaut-img':swiperCurrent==index,'card-img':swiperCurrent!=index,'card-margin':swiperCurrent==index}" />
				</view>
			</swiper-item>
		</swiper>
		<view class="quite-btn">
			<view class="quite-btn-left" @click="changeCurIndex(-1)">
				<image src="@/assets/images/fanhui@2x.png" class="w-[32px] h-[42px]" />
			</view>
			<view class="quite-btn-right" @click="changeCurIndex(1)">
				<image src="@/assets/images/fanhui@2x.png" class="w-[32px] h-[42px]" />
			</view>
		</view>
		<view class="custom-indicator">
			<view v-for="(item,index) in list" :key="index"
				:class="['indicator-item',swiperCurrent==index?'indicator-item-active':'']"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		defineProps,
		defineEmits
	} from 'vue'

	// Define the props
	const props = defineProps({
		type: {
			type: String,
			default: 'book'
		},
		list: {
			type: Array,
			default: () => []
		},
		heightNumber: {
			type: Number,
			default: 600
		},
		borderRadius: {
			type: Number,
			default: 8
		},
		autoplay: {
			type: Boolean,
			default: true
		},
		interval: {
			type: Number,
			default: 5000
		},
		circular: {
			type: Boolean,
			default: true
		},
		current: {
			type: Number,
			default: 0
		}
	})

	// Define the emitted events
	const emit = defineEmits(['change', 'swiperItemClick'])

	// Reactive state for swiper current
	const swiperCurrent = ref(props.current)

	// Sync the `swiperCurrent` with `current` prop on mount or prop change
	watch(() => props.current, (newVal) => {
		swiperCurrent.value = newVal
	})

	// Methods
	const handleChange = (e) => {
		swiperCurrent.value = e.detail.current
		emit('change', e.detail.current)
	}

	function changeCurIndex(step) {
		let newStep = swiperCurrent.value + step
		if (newStep < 0) {
			newStep = props.list.length - 1
		} else if (newStep > props.list.length - 1) {
			newStep = 0
		}
		handleChange({
			detail: {
				current: newStep
			}
		})
	}

	const swiperItemClick = (index) => {
		emit('swiperItemClick', index)
	}
</script>

<style scoped lang="scss">
	.slide {
		width: 100%;
		position: relative;

		.quite-btn {
			width: 100%;

			.quite-btn-left,
			.quite-btn-right {
				display: flex;
				align-items: center;

				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: 130px;
				height: 130px;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.3);
			}

			.quite-btn-left {
				left: -65px;
				padding-left: 75px;

				image {
					transform: rotate(-180deg);
				}
			}

			.quite-btn-right {
				right: -65px;
				padding-left: 25px;
			}
		}
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		overflow: hidden;
		box-sizing: border-box;
		background: #D3BEA0;

	}

	.swiper-item-card {
		width: 78% !important;
		height: 100%;
		margin: 0 11%;
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		align-items: flex-start;
		justify-content: center;


	}

	.swiper-item-card-margin {
		padding: 7% 0;
	}

	.defaut-img {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}



	.card-margin,
	.card-img {
		min-width: 75%;
		min-height: 75%;
		max-width: 80%;
		max-height: 94%;
		margin: 0 20px;
		overflow: hidden;
	}

	.custom-indicator {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		margin: 0 auto;
		bottom: 0px;
	}

	.indicator-item {
		width: 32px;
		height: 32px;
		background: url('@/assets/images/slide.png') no-repeat;
		background-size: 100% 100%;
		margin: 0 6px;

	}

	.indicator-item-active {
		background: url('@/assets/images/slice-active.png') no-repeat;
		background-size: 100% 100%;
	}

	.card-bg {
		width: calc(100% - 40px);
		height: calc(100% - 40px);
		@apply absolute left-[20px] top-[20px];
	}

	.swiper-container {
		@apply px-[40px] py-[30px] relative flex items-center justify-center bg-[#D2C5B2];
		width: calc(100% - 50px);
		height: 100%;
		border-radius: 12px;

		&.is-seal {
			background: url('@/assets/images/seal-bg.png') no-repeat;
			background-size: 100% 100%;
			background-color: transparent;
		}
	}
</style>